<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>评教任务</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">

    <link rel="stylesheet" href="/static/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-validator/css/bootstrapValidator.min.css">


    <!-- Latest compiled and minified CSS -->
    <style>
        /* ibox 背景 */
        .ibox-blue > .ibox-title {
            border-color: rgb(57, 174, 245);
        }

        .form-control:focus,
        .single-line:focus {
            border-color: #0e9aef !important;
        }

        .checkbox-inline {
            line-height: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins ibox-blue">
        <div class="ibox-title">
            <h5>评教任务</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">

            <div class="row row-lg">
                <div class="example" style="margin-top: -10px;">
                    <div class="btn-group hidden-xs" id="toolbar" role="group">
                        <button type="button" class="btn btn-outline btn-default" data-toggle="modal"
                                data-target="#addModal">
                            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            添加
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="startButton">
                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            开启
                        </button>
                        <button type="button" class="btn btn-outline btn-default" id="overButton">
                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            关闭
                        </button>
                    </div>

                    <table id="TableEvents"></table>

                </div>
            </div>

        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="addModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="addForm" class="form-horizontal" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">任务新增</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">任务名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" placeholder="请输入员工名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">开始时间</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control input-wdatepicker" name="start_data"
                                   placeholder="请输入开始时间"
                                   onfocus="WdatePicker({onpicked:checkStartTime(this), minDate:'%y-%M-%d', readOnly:true})">
                            <input type="hidden" class="form-control" name="create_data">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">结束时间</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control input-wdatepicker" name="end_data"
                                   placeholder="请输入结束时间"
                                   onfocus="WdatePicker({onpicked:checkEndTime(this), minDate:'%y-%M-%d', readOnly:true})">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="/static/js/content.js?v=1.0.0"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<script src="/static/plugins/bootstrap-validator/js/language/zh_CN.js"></script>
<script src="/static/index/js/WdatePicker.js"></script>
<script>
    $(function () {
        $("#TableEvents").bootstrapTable({
            url: '/admin/etask/getList',
            method: 'post',
            contentType: "application/x-www-form-urlencoded",
            queryParamsType: '',//查询参数组织方式
            queryParams: queryParams,//请求服务器时所传的参数
            sidePagination: 'server',//指定服务器端分页
            search: true,
            strictSearch: true,
            searchOnEnterKey: true,
            pagination: true,
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            striped: true,
            sortable: false,
            sortOrder: "asc",
            clickToSelect: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [1, 5, 10, 25, 50, 100, 'ALL'],
            iconSize: 'outline',
            toolbar: '#toolbar',
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            },
            responseHandler: function (res) {
                //在ajax获取到数据，渲染表格之前，修改数据源
                /*console.log(res)*/
                console.log(res)
                return {"total": res.total, "rows": res.data};
            },
            columns: [
                {
                    title: '全选',
                    field: 'select',
                    //复选框
                    radio: true,
                    width: 25,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'id',
                    title: 'ID',
                    align: 'center'
                },
                {
                    field: 'name',
                    title: '任务名',
                    align: 'center'
                },
                {
                    field: 'start_data',
                    title: '开始时间',
                    align: 'center'
                },
                {
                    field: 'end_data',
                    title: '结束时间',
                    align: 'center'
                },
                {
                    field: 'create_data',
                    title: '创建时间',
                    align: 'center'
                },
                {
                    field: 'createuser_id',
                    title: '创建人',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value != "" && value != null) {
                            return row.username;
                        }
                        return "其他";
                    }
                },
                {
                    field: 'status',
                    title: '状态',
                    align: 'center',
                    formatter: function (value, item, index) {
                        if (value == 0) {
                            return '<span class="label label-danger">已关闭</span>';
                        } else if (value == 1) {
                            return '<span class="label label-primary">开启中</span>';
                        }
                        return "其他";
                    }
                },
                {
                    field: 'status',
                    title: '是否可开',
                    align: 'center',
                    formatter: function (value, item, index) {
                        var now = new Date();
                        var start = dateToTime(item.start_data);
                        var end = dateToTime(item.end_data);
                        if (now>end){
                            return '<span class="label label-error">已过期</span>';
                        }else if (now <start){
                            return '<span class="label label-danger">未开始</span>';
                        }else if (now > start && now <end){
                            return '<span class="label label-success">可开启</span>';
                        }
                        return "其他";
                    }
                },
            ]
        });

        //请求服务数据时所传参数
        function queryParams(params) {
            return {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                searchText: params.searchText
            }
        }

        //添加角色
        $('#addModal').on('show.bs.modal', function () {
            $("#addForm")[0].reset();
            $("#addForm").data('bootstrapValidator').destroy();
            $('#addForm').data('bootstrapValidator', null);
            addValidator();
        });
        addValidator();

        function addValidator() {
            $('#addForm').bootstrapValidator({
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '任务名不能为空'
                            },
                            stringLength: {
                                max: 30,
                                message: '任务名长度最多30个字符'
                            },
                        },
                    },
                    start_data: {
                        validators: {
                            notEmpty: {
                                message: '开始时间不能为空',
                                callback: function (value, validator) {
                                }
                            },
                            callback: {
                                message: '开始时间必须小于结束时间',
                                callback: function (value, validator) {
                                    var start = $("#addForm input[name='start_data']").val();
                                    var end = $("#addForm input[name='end_data']").val();
                                    if (start == null || start == "" || end == null || end == "") {
                                        return true;
                                    } else {
                                        //将时间转化为时间戳进行比较
                                        start = dateToTime(start);
                                        end = dateToTime(end);
                                        if (start < end) {
                                            return true;
                                        } else {
                                            return false;
                                        }
                                    }
                                }
                            }
                        }
                    },
                    end_data: {
                        validators: {
                            notEmpty: {
                                message: '结束时间不能为空',
                                callback: function (value, validator) {
                                }
                            },
                            callback: {
                                message: '结束时间必须大于开始时间',
                                callback: function (value, validator) {
                                    var start = $("#addForm input[name='start_data']").val();
                                    var end = $("#addForm input[name='end_data']").val();
                                    if (start == null || start == "" || end == null || end == "") {
                                        return true;
                                    } else {
                                        //将时间转化为时间戳进行比较
                                        start = dateToTime(start);
                                        end = dateToTime(end);
                                        if (start < end) {
                                            return true;
                                        } else {
                                            return false;
                                        }
                                    }
                                }
                            }
                        }
                    },
                }
            }).on('success.form.bv', function (e) {
                // Prevent form submission
                //为创建时间赋值
                $("#addForm input[name='create_data']").val(new Date());
                e.preventDefault();
                $.ajax({
                    url: "/admin/etask/addEtask",
                    data: $("#addForm").serialize(),
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            $("#addModal").modal('hide');
                            $('#TableEvents').bootstrapTable('refresh');
                            parent.layer.msg(data.msg, {icon: 1});
                        }
                    }
                });
            });
        }

        //开启评教
        $("#startButton").click(function () {
            var $result = $('#TableEvents');
            var list = $result.bootstrapTable('getSelections');
            if (list.length <= 0 || list.length > 1) {
                parent.layer.msg('请选中一条数据', {time: 1500, icon: 5});
                return;
            }
            list = list[0];
            var id = list.id;
            //判断是否可以开启
            var now = new Date();
            var start = dateToTime(list.start_data);
            var end = dateToTime(list.end_data);

            if (now>end || now <start){
                parent.layer.msg("不在可开启时间内", {time: 1500, icon: 5});
                return;
            }
            parent.layer.confirm('确定开启选中评教任务？', {
                btn: ['确定', '取消'], //按钮
                shade: false //不显示遮罩
            }, function () {
                $.ajax({
                    url: "/admin/etask/startEtask?id=" + id,
                    data: {},
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            $('#TableEvents').bootstrapTable('refresh');
                            parent.layer.msg(data.msg, {icon: 1});
                        } else {
                            parent.layer.msg(data.msg, {time: 1500, icon: 5});
                        }
                    }
                });
            });
        });

        //关闭评教
        $("#overButton").click(function () {
            parent.layer.confirm('确定关闭所有评教任务？', {
                btn: ['确定', '取消'], //按钮
                shade: false //不显示遮罩
            }, function () {
                $.ajax({
                    url: "/admin/etask/overEtask",
                    data: {},
                    type: "POST",
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            $('#TableEvents').bootstrapTable('refresh');
                            parent.layer.msg(data.msg, {icon: 1});
                        } else {
                            parent.layer.msg(data.msg, {time: 1500, icon: 5});
                        }
                    }
                });
            });
        });
    });


    //将日期转化为时间戳
    function dateToTime(str) {
        str = str.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
        var date = new Date(str); // 构造一个日期型数据，值为传入的字符串
        var time = date.getTime();
        return time;
    }

    //日期框的验证
    function checkStartTime(obj) {
        if (obj.value != null && obj.value != "" && obj.value != undefined) {
            $("#addForm").data("bootstrapValidator").updateStatus("start_data", "NOT_VALIDATED", null).validateField("start_data");
            $("#addForm").data("bootstrapValidator").updateStatus("end_data", "NOT_VALIDATED", null).validateField("end_data");

        }
    }

    function checkEndTime(obj) {
        if (obj.value != null && obj.value != "" && obj.value != undefined) {
            $("#addForm").data("bootstrapValidator").updateStatus("start_data", "NOT_VALIDATED", null).validateField("start_data");
            $("#addForm").data("bootstrapValidator").updateStatus("end_data", "NOT_VALIDATED", null).validateField("end_data");
        }
    }


</script>
</body>
</html>